<template>
   <div class="">
      <form-preview header-label="付款金额" header-value="¥2400.00" :body-items="list"></form-preview>

      <!-- 优惠券单元格 -->
      <van-coupon-cell
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        @click="showList = true"
      ></van-coupon-cell>

      <!-- 优惠券列表 -->
      <van-popup v-model="showList" position="bottom">
        <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
          @exchange="onExchange"></van-coupon-list>
      </van-popup>

      <x-button type="warn">微信支付</x-button>
   </div>
</template>

<script>

import { FormPreview, XButton } from 'vux'
import Vue from 'vue'
import { CouponCell, CouponList, Popup } from 'vant'
import 'vant/lib/vant-css/index.css'
Vue.component(Popup.name, Popup)
Vue.component(CouponCell.name, CouponCell)
Vue.component(CouponList.name, CouponList)

const coupon = {
  available: 1,
  discount: 0,
  denominations: 150,
  origin_condition: 0,
  reason: '',
  value: 150,
  condition: '下单立减 1.50 元',
  name: '新手专用优惠券',
  start_at: 1489104000,
  end_at: 1514592000
}

export default {
  components: {
    FormPreview,
    XButton
  },
  data () {
    return {
      list: [{
        label: '商品',
        value: '电动打蛋机'
      }, {
        label: '标题标题',
        value: '名字名字名字'
      }, {
        label: '标题标题',
        value: '很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字'
      }],
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      showList: false
    }
  },
  methods: {
    onChange (index) {
      this.showList = false
      this.chosenCoupon = index
    },
    onExchange (code) {
      this.coupons.push(coupon)
    }
  },
  mounted () {
  }
}
</script>

<style scoped>

.car-foot-nav{
    position: fixed;
    bottom:0;
    width: 100%;
    border-top: 0.0156rem;
}
.car-btn{
  flex:1;
  height: 2.22rem;
  border: none;
  flex:none;
  color:#77b59c;
  float: left;
}
.sum-price{
  width: 60%;
}

.to-pay{
  background: red;
  color: #fff !important;
  width: 40%;
}

</style>
